
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
console.log('ctx', ctx)
const fontSize = 20;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const colors = [
    "red", "blue", "green", "orange", "purple", "cyan", "magenta", "yellow",
    "brown", "pink", "teal", "lime", "gold", "silver", "navy", "olive",
    "maroon", "aqua", "coral", "chartreuse", "chocolate", "khaki", "lavender", "plum"
];
let colorI = 0;
const line1 = [window.innerWidth, window.innerHeight]
const line2 = [window.innerWidth, window.innerHeight - fontSize]
const line3 = [window.innerWidth, window.innerHeight - 2 * fontSize]
const line4 = [window.innerWidth, window.innerHeight - 3 * fontSize]
const line5 = [window.innerWidth, window.innerHeight - 4 * fontSize]

// setting
// const beginSleepTime = {
//     isTomorrow: false,
//     time: "23:00"
// }
// const wakeupTime = {
//     isTomorrow: true,
//     time: "07:20"
// }
const beginSleepTime = {
    isTomorrow: window.settings.begin_isTomrrow || false,
    time: window.settings.begin_time || "23:00",
}
const wakeupTime = {
    isTomorrow: window.settings.end_isTomrrow || true,
    time: window.settings.end_time || "07:20",
}

ctx.font = `${fontSize}px Arial`;

if (window.settings.todoList && window.settings.todoList.length) {
    ctx.save()
    ctx.textAlign = 'right'; // 设置文本对齐方式为右对齐
    ctx.textBaseline = 'top'; // 设置文本基线为底部
    ctx.fillStyle = "red";
    ctx.fillText(`今日代办`, window.innerWidth, fontSize * 2)
    console.log('widow.todoList', window.settings.todoList)
    window.settings.todoList.forEach((text, index) => {
        console.log('代办')
        ctx.fillText(`${index + 1}：${text}`, window.innerWidth, fontSize * (3 + index))
    })
    ctx.restore()
}

ctx.textAlign = 'right'; // 设置文本对齐方式为右对齐
ctx.textBaseline = 'bottom'; // 设置文本基线为底部
ctx.fillStyle = 'red';

function getNow() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    const hour = now.getHours();
    const minute = now.getMinutes();
    return `${year}-${month}-${date} ${hour}:${minute}`;
}
function getTime(timeObj) {
    const obj = new Date()
    timeObj.isTomorrow && obj.setDate(obj.getDate() + 1)
    const hour = +timeObj.time.split(':')[0];
    const minute = +timeObj.time.split(':')[1];
    obj.setHours(hour)
    obj.setMinutes(minute)
    return obj
}
const beginSleepTimeDateObj = getTime(beginSleepTime)
const wakeupTimeDateObj = getTime(wakeupTime)
const allSleepTime = (wakeupTimeDateObj.getTime() - beginSleepTimeDateObj.getTime()) / 1000
ctx.fillText(`睡眠时间 ${second2Str(allSleepTime)}`, ...line3)
const restTime = (wakeupTimeDateObj.getTime() - Date.now()) / 1000
ctx.fillText(`距离"起床" ${wakeupTime.time}还有 ${second2Str(restTime)}`, ...line1)


function pollingIsOver() {
    // 超过time的秒数
    const overtime_second = (Date.now() - beginSleepTimeDateObj.getTime()) / 1000
    console.log('检测是否超时', overtime_second >= 0)
    if (overtime_second >= 0) {
        overTimeDo()
    } else {
        // 没有过时间
        ctx.save()
        ctx.fillStyle = 'red';
        ctx.clearRect(0, line2[1] - fontSize, window.innerWidth, fontSize);
        ctx.fillText(`距离"临睡点" ${beginSleepTime.time}还有 ${second2Str(-overtime_second)}`, ...line2)
        ctx.restore()
        setTimeout(() => {
            pollingIsOver()
        }, 2000)
    }
}
pollingIsOver()


function overTimeDo() {
    const overtime_second = (Date.now() - beginSleepTimeDateObj.getTime()) / 1000
    console.log('overtime_second', overtime_second)
    colorI++
    if (overtime_second > 8 * 60 * 60000) {
        ctx.save()
        ctx.fillStyle = 'red';
        ctx.clearRect(0, line2[1] - fontSize, window.innerWidth, fontSize);
        const color = colors[colorI % colors.length]
        ctx.fillStyle = color;
        ctx.fillText("超过8小时", ...line2)
        ctx.restore()
    } else {
        ctx.save()
        ctx.fillStyle = 'red';
        ctx.clearRect(0, line2[1] - fontSize, window.innerWidth, fontSize);
        const color = colors[colorI % colors.length]
        ctx.fillStyle = color;
        ctx.fillText(`距离"临睡点"${beginSleepTime.time}已超时 ${second2Str(overtime_second)}`, ...line2)
        setTimeout(() => {
            overTimeDo()
        }, 1000)
        ctx.restore()
    }
}



function second2Str(second) {
    const allMinute = second / 60
    const hour = Math.floor(allMinute / 60)
    const minute = Math.floor(allMinute % 60)
    return `${hour}小时${minute}分`
}



